<template>
    <el-form ref="formRef" :model="form" labelWidth="120px" label-suffix="：">
        <el-form-item label="节点名称">
            <el-input v-model="form.nodeName"></el-input>
        </el-form-item>
        <el-form-item label="节点ID">
            <el-input v-model="form.typeConcatName" disabled></el-input>
        </el-form-item>
<!--        <el-form-item label="custom_distribution">-->
<!--            <el-input v-model="form.custom_distribution"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="description">-->
<!--            <el-input v-model="form.description"></el-input>-->
<!--        </el-form-item>-->
        <el-form-item label="限制">
            <el-input-number v-model="form.limit"></el-input-number>
        </el-form-item>
<!--        <el-form-item label="never_ending">-->
<!--            <el-switch v-model="form.never_ending" active-value="Y" inactive-value="N"></el-switch>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="interval_in_ms">-->
<!--            <el-input-number v-model="form.interval_in_ms"></el-input-number>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="row_time_field">-->
<!--            <el-input v-model="form.row_time_field"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="last_time_field">-->
<!--            <el-input v-model="form.last_time_field"></el-input>-->
<!--        </el-form-item>-->
        <div style="margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between;">
            <h4 style="margin: 0 10px 0 0;">字段：</h4>
            <div style="display: flex; gap: 8px;">
                <el-button type="primary" @click="addField">新增字段</el-button>
                <el-button type="danger" @click="batchDelete" :disabled="selectedRows.length === 0">删除选中</el-button>
            </div>
        </div>
        <el-table :data="form.fields.field"  style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="30"/>
            <el-table-column prop="name" label="字段名" width="180">
                <template #default="scope">
                    <el-input v-model="scope.row.name"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="type" label="类型" width="180">
                <template #default="scope">
                    <el-select v-model="scope.row.type">
                        <el-option
                            v-for="item in typeList"
                            :key="item.dictLabel"
                            :label="item.dictLabel"
                            :value="item.dictLabel"
                        >
                        </el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column prop="format" label="格式" width="180">
                <template #default="scope">
                    <el-select v-model="scope.row.format">
                        <el-option v-for="item in formatList"
                                   :key="item.dictValue"
                                   :label="item.dictLabel"
                                   :value="item.dictValue"
                        >
                        </el-option>
                    </el-select>
                </template>
            </el-table-column>
<!--            <el-table-column prop="length" label="长度" width="180">-->
<!--                <template #default="scope">-->
<!--                    <el-input-number v-model="scope.row.length"></el-input-number>-->
<!--                </template>-->
<!--            </el-table-column>-->
<!--            <el-table-column prop="precision" label="精度" width="180">-->
<!--                <template #default="scope">-->
<!--                    <el-input-number v-model="scope.row.precision"></el-input-number>-->
<!--                </template>-->
<!--            </el-table-column>-->
    <!--      <el-table-column prop="currency" label="货币类型" width="120">-->
    <!--        <template #default="scope">-->
    <!--          <el-input v-model="scope.row.currency"></el-input>-->
    <!--        </template>-->
    <!--      </el-table-column>-->
    <!--      <el-table-column prop="decimal" label="小数" width="120">-->
    <!--        <template #default="scope">-->
    <!--          <el-input v-model="scope.row.decimal"></el-input>-->
    <!--        </template>-->
    <!--      </el-table-column>-->
    <!--      <el-table-column prop="group" label="分组" width="120">-->
    <!--        <template #default="scope">-->
    <!--          <el-input v-model="scope.row.group"></el-input>-->
    <!--        </template>-->
    <!--      </el-table-column>-->
            <el-table-column prop="nullif" label="值" width="240">
                <template #default="scope">
                    <el-input v-model="scope.row.nullif"></el-input>
                </template>
            </el-table-column>
<!--            <el-table-column prop="set_empty_string" label="设为空串">-->
<!--                <template #default="scope">-->
<!--                    <el-switch v-model="scope.row.set_empty_string" active-value="Y" inactive-value="N"></el-switch>-->
<!--                </template>-->
<!--            </el-table-column>-->
            <el-table-column label="操作" width="120">
                <template #default="scope">
                    <el-button
                        type="danger"
                        link
                        @click="deleteField(scope.$index)"
                    >删除</el-button>
                </template>
            </el-table-column>
        </el-table>


  <!--    <el-form-item label="备注">-->
  <!--      <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"/>-->
  <!--    </el-form-item>-->


    </el-form>
    <dialog-footer @ok="submitForm" @cancel="cancel"/>

</template>

<script setup>
import {defineComponent, ref, onMounted, reactive, watch} from 'vue';
import {flowServiceStore} from '@data/store/flow';

const flowCount = flowServiceStore();
import { getDicts } from '@base/api/base/dict/data'
import {storeToRefs} from 'pinia';
import {ElMessage} from "element-plus";

const {flowData} = storeToRefs(flowCount);

defineComponent({
    name: 'RowGenerator',
});
const props = defineProps({
    detailObject: {
        type: Object,
        default: () => {
        },
    },
})
const loading = ref(false);

const form = reactive({
    nodeName: '',
    name: '',
    // remark: '',
    type: 'RowGenerator',
    copies: 1,
    description: '',
    distribute: 'Y',
    custom_distribution: '',
    fields: {
        field: []
    },
    limit: 0,
    never_ending: '',
    interval_in_ms: 0,
    row_time_field: '',
    last_time_field: '',

    GUI: {
        xloc: 1,
        yloc: 1,
        draw: 'Y'
    }
});

const emit = defineEmits(['cancel']);

onMounted(() => {
    getTypeList();
    getFormatList();
    form.nodeName = flowData.value[props.detailObject.id]?.nodeName || props.detailObject.data.label;
    // form.remark = flowData.value[props.detailObject.id]?.remark || '';
    form.name = props.detailObject.id;
    form.typeConcatName = `${props.detailObject.id}(${form.type}-${props.detailObject.id})`;
    // form.description = flowData.value[props.detailObject.id]?.description || '';
    // form.custom_distribution = flowData.value[props.detailObject.id]?.custom_distribution || '';
    form.fields = flowData.value[props.detailObject.id]?.fields || {
        field: []
    };
    form.limit = flowData.value[props.detailObject.id]?.limit || 0;
    // form.never_ending = flowData.value[props.detailObject.id]?.never_ending || '';
    // form.interval_in_ms = flowData.value[props.detailObject.id]?.interval_in_ms || 0;
    // form.row_time_field = flowData.value[props.detailObject.id]?.row_time_field || '';
    // form.last_time_field = flowData.value[props.detailObject.id]?.last_time_field || '';

    form.distribute = flowData.value[props.detailObject.id]?.distribute || 'Y';

})

const typeList = ref([]);
const getTypeList= () => {
    getDicts('ktr_field_type').then((response) => {
        typeList.value = response.data
        console.log('typeList',typeList.value)
    })
};
const formatList = ref([]);
const getFormatList= () => {
    getDicts('date_format').then((response) => {
        formatList.value = response.data
        console.log('formatList',formatList.value)
    })
};

const selectedRows = ref([])
// 处理选择变化
const handleSelectionChange = (val) => {
    selectedRows.value = val
}
// 批量删除方法
const batchDelete = () => {
    if (selectedRows.value.length === 0) return
    // 获取选中项的索引
    const indexes = selectedRows.value.map(row =>
        form.fields.field.indexOf(row)
    ).sort((a,b) => b - a) // 倒序排列避免删除错位
    // 执行删除
    indexes.forEach(index => {
        form.fields.field.splice(index, 1)
    })
    // 清空选中
    selectedRows.value = []
}
// 添加字段
const addField = () => {
    form.fields.field.push({
        name: '',
        type: '',
        nullif: '',
        // length: 0,
        // precision: 0,
        // currency: '',
        // decimal: '',
        // group: '',
        // set_empty_string: '',
        format: ''
    })
}
// 删除字段
const deleteField = (index) => {
    form.fields.field.splice(index, 1)
}

const submitForm = () => {
    form.fields.field.forEach(fieldItem => {
      form.fieldList.push(fieldItem);
    });
    flowCount.setFlowData(
        {
            ...flowData.value,
            [props.detailObject.id]: {
                ...form,
                name: `${form.type}-${form.name}`,
            }
        }
    )
    console.log(flowData.value);
    emit('cancel');
}
const cancel = () => {
    emit('cancel');
}

const toReader = () => {

}

const parseSql = () => {
}

</script>

<style scoped>

</style>